<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>即时通讯主界面</title>
	<link href="css/index.css" rel="stylesheet" type="text/css"/>

	<!-- 引入jQuery核心js文件 -->
	<script src="dep/jQuery/jquery-3.2.1.min.js"></script>
	<!-- 引入Bootstrap核心样式文件 -->
	<link href="dep/bootstrap/bootstrap.css" rel="stylesheet">
	<link href="dep/bootstrap/bootstrap-datetimepicker.min.css"  rel="stylesheet" />
	<!--<script type="text/javascript" src="dep/jQuery/jquery.js"></script>-->
	<!-- 引入BootStrap核心js文件 -->
	<script src="dep/bootstrap/bootstrap.min.js"></script>
	<!-- 引入拼音检索组件 -->
	<script type="text/javascript" src="dep/jquery.charfirst.pinyin.js"></script>
	<script type="text/javascript" src="js/contact.js"></script>
	<script type="text/javascript" src="js/js_login/登陆.js"></script>
</head>
<body>
	<!-- banckground -->
	
	<div id="modifyNameBg" class="grayBg">
		<div id="modifyGroupNameDiv">
			<div>
				修改群名
				<button class="btnClose">X</button>
			</div>
			<div>
				<input type="text"/>
			</div>
			<button class="btnConfirm">确定</button>
		</div>
	</div>

	<div id="recordBg" class="grayBg">
		<div id="searchMessageDiv">
			<div class="padding10px">
				消息记录
				<button class="btnClose">X</button>
			</div>
			<div class="fontSize15px">
				<span>搜索内容:</span>
				<input id="searchVal" placeholder="梓桐" value=""/>
				<button onclick="showSearch()">确定</button>
			</div>
			<div id="messageDiv">
			<!--
				<div class="seperator">
					<span>2017-10-11</span>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">阿门</span>
						<span class="msgTime">15:02:02</span>
					</div>
					<div class="msgCtxt">我今天见到梓桐了。</div>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">贝塔</span>
						<span class="msgTime">20:33:44</span>
					</div>
					<div class="msgCtxt">我约了梓桐明天去逛街。</div>
				</div>
				
				
				<div class="seperator">
					<span>2017-11-15</span>
				</div>
				
				<div class="remsg">
					<div class="msgTitle">
						<span class="msgName">西格玛</span>
						<span class="msgTime">01:15:32</span>
					</div>
					<div class="msgCtxt">梓桐最近挺忙的。</div>
				</div>
				
			-->	
			</div>
		</div>
	</div>

	<ul id="mdialog-rclick-menu-div">
		<li func="1">置顶</li>
		<li func="3">修改群名</li>
		<li func="2">关闭聊天</li>
	</ul>
	
	<ul id="sdialog-rclick-menu-div">
		<li func="1">置顶</li>
		<li func="2">关闭聊天</li>
	</ul>
	
	<div class="back">
		<!-- 主要界面 -->
		<div class="main">
			<!-- 左侧布局 -->
			<div class="main-left">
				<!-- header -->
				<div class="header">
					<!-- 头像 -->
					<div class="avatar" id="headPic_div">
						<img class="img" id="headPic" src="">
					</div>
					<!-- 昵称信息 -->
					<div class="info">
						<h3 class="nickname">
							<span class="display-name" id="my_nickName_Top"></span>
							<span href="javascript:" class="opt">
                                <div class="dropdown">
								    <i class="web_chat_add" data-toggle="dropdown" aria-haspopup="true"
									   aria-expanded="false">
                                    <span class="caret"></span>
                                    </i>
                                    <ul class="dropdown-menu" aria-labelledby="dLabel">
                                        <!--<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
										<!--添加好友-->
										<!--</button></li>-->
<!--                                         <li><a href="#" data-toggle="modal" data-target="#myModal"
											   class="glyphicon glyphicon-user">&nbsp;添加好友</a></li> -->
                                        <li><a href="#" class="glyphicon glyphicon-user"
												onclick="onAddFriend()">&nbsp;添加好友</a></li>
                                        <li><a href="#" class="glyphicon glyphicon-flag"
											   onclick="show_myModal_chat()">&nbsp;发起聊天</a></li>
                                        <li><a href="#" class="glyphicon glyphicon-volume-down">&nbsp;关闭声音</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#" class="glyphicon glyphicon-off">&nbsp;退出</a></li>
                                    </ul>
                                </div>
							</span>
						</h3>
					</div>
				</div>
				<!-- end header -->
				<!-- search_bar -->
				<div class="search_bar" id="search_bar">
					<i class="web_chat_search"></i>
					<input type="text" placeholder="搜索" class="frm_search">
				</div>
				<!-- end search -->
				<!-- tab -->
				<div class="tab">
					<div class="tab_item" title="聊天">
						<a href="#" class="chat" title="聊天" style="position: relative;">
							<i class="web_chat_tab_chat web_tab_hl"></i>
							<i class="alert_point"></i>
						</a>
					</div>
					<div class="tab_item" title="通讯录">
						<a href="#" class="chat" title="通讯录" style="position: relative;">
							<i class="web_chat_tab_friends web_tab_hl"></i>
							<i class="alert_point"></i>
						</a>
					</div>
				</div>
				<!--end tab-->
				<!-- 聊天记录联系人 -->
				<div class="nav_view">	
					<div class="Initials">
						<ul>
									<!-- <li><img src="images/068.png" class="star"></li> -->
						</ul>  
					</div>									
					<!-- chat_list -->
					<div class="scroll-wrapper chat_list scrollbar-dynamic nav_list">
						<!-- 联系人列表样式 -->
						<!-- <div id="letter"></div> -->
						<div class="contact_list scrollbar-dynamic scroll-content scroll-scrolly_visible" id="J_NavChatScrollBody">
							<!--empty chat list
							<div class="empty_chat_list">
								<span class="empty_chat_list">暂无新消息</span>
							</div>-->


							<script>

								
							</script>
						
							<p class="ico_loading ng-hide">
								<img src="images/wait.gif" alt>正在获取最近的聊天...
							</p>
						<!--	<div class="chat_item slide-left ng-scope top" title="0000000">
								<div class="ext">
									<p class="attr">19:32</p>
								</div>
								<div class="avatar">
									<img src="images/3.jpg" class="img">
								</div>
								<div class="info">
									<h3 class="nickname" style="display: block;margin:0px">
										<span class="nickname_text">奥巴马</span>
									</h3>
									<p class="msg ng-scope">
										<span>吾皇万岁万岁万万岁</span>
									</p>
								</div>
							</div>-->
							
								
							
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			<!-- 右侧布局 -->
			<div class="main-right" id="right_default" style="display: none">
<!-- 					<div>
                        <input type="file" name="FileUpload" id="FileUpload">
                        <button id="btn_uploadimg">上传图片</button>
                    </div> -->
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title poi">
							<label id="title_name" class="title_name">聊天对象</label>
						</div>

						<div class="rightfloat"><button id="btnShowMember" class="directDown" flag="hide"></button></div>
					</div>
				</div>

				<div class="group_member_panel pre-scrollable">
					<div class="memberItem">
						<img src="./im	ages/4.jpg">
						<button class="delMember"></button>
						<span>name</span>
					</div>
					<div class="memberItem">
						<img src="./im	ages/4.jpg">
						<button class="delMember"></button>
						<span>naasdfdfme</span>
					</div>
				</div>

				<!-- end HD -->
				<div class="scroll-wrapper box_bd chat_bd scrollbar-dynamic" >

					<div class="chat_area">
						<div class="box_bd chat_bd scrollbar-dynamic scroll-content " id="message_list" >


							<!--聊天框内消息示例 start-->
							<div  class="message" >

								<img class="avatar chat_avatar" src="images/6.jpg"  title="侯程程" >

								<div class="content">
									<div class="bubble js_message_bubble ng-scope bubble_default left"  >
										<div class="bubble_cont" >
											<div class="plain">
												明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
											</div>
										</div>
									</div>
								</div>
							</div>

							<div  class="message me" >

								<img class="avatar chat_avatar" src="images/3.jpg"  title="狼人" >

								<div class="content" >
									<div class="bubble js_message_bubble bubble_primary  ng-scope bubble_default right"  >
										<div class="bubble_cont" >

											<div class="plain">
												<img class = "message_picture" src="images/4.jpg"/>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--聊天框内消息示例 end -->


						</div>
					</div>

					<!-- 下部面板 -->
					<div class="box_ft">
						<div class="toolbar" id="toolbar">
							<a id = "upload_file_a"  class="web_chat_pic js_fileupload webuploader-container">
					<!-- 上传图片 -->
									<form method="POST" id="senfPic" enctype="multipart/form-data" action="http://10.103.240.160:8080/sendPicToOne?from=3&to=5&time=2017">
				<input type="file" onchange="selectImageAsMessage(this);" name="file"  id = "upload_file_input"   class="webuploader-element-invisible" />
		</form>
		<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
							</a>							
							

						<span class="right pointer" onclick="searchMessage()">消息记录<span/>





						</div>
						<!-- 发送区域 -->
						<div class="flex">
							<textarea name="mytextarea" id="inputArea"></textarea>
						</div>
						<div class="action">
							<span class="desc">按下Ctrl+Enter换行</span>
							<a class="btn btn_send" onclick="return sendMessage()">发送</a>
						</div>
					</div>
				</div>
			</div>


			<!--右侧显示联系人详细信息-->
			<div class="main-right" id="right_contacts" style="display: none">
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title">详细信息</div>
					</div>
				</div>
				<div class="box_bd">
					<div class="">
						<div class="profile">

							<div class="msg_avatar">
								<img class="img" id="cont_photo" alt="" src="images/1.jpg">
							</div>

							<div class="msg_nickname">
								<h4 class="nickname" id="cont_Nick"></h4>
							</div>

							<!--<p class="nicheng">阿尔卑斯</p>-->

							<div class="detail_info">
								<div class="meta_item">
									<label class="meta_item_label">备注：</label>
									<p type="text" class="value" id="cont_nickName">
										<input type="text" class="input_update_nickName_friend" id="cont_nickName_input" value="">
									</p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">名称：</label>
									<p class="value" id="cont_userName"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">部门：</label>
									<p class="value" id="cont_department"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">&nbsp;I D：&nbsp;</label>
									<p class="value" id="cont_ID"></p>
								</div>
							</div>

							<div class="button">
								<a class="button_send" href="#" >发消息</a><br>
								<a class="button_del" href="#">删除好友</a>
							</div>
						</div>
					</div><!-- end ngIf: currentContact -->
					<!-- ngIf: !currentContact -->
				</div>
			</div>
			
			
			<!--右侧显示新加好友信息-->
			<div class="main-right" id="right_contacts" style="display: none">
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title">详细信息</div>
					</div>
				</div>
				<div class="box_bd">
					<div class="">
						<div class="profile">

							<div class="msg_avatar">
								<img class="img" id="cont_photo" alt="" src="images/1.jpg">
							</div>

							<div class="msg_nickname">
								<h4 class="nickname" id="cont_Nick"></h4>
							</div>

							<!--<p class="nicheng">阿尔卑斯</p>-->

							<div class="detail_info">
								<div class="meta_item">
									<label class="meta_item_label">备注：</label>
									<p type="text" class="value" id="cont_nickName">
										<input type="text" class="input_update_nickName_friend" id="cont_nickName_input" value="">
									</p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">名称：</label>
									<p class="value" id="cont_userName"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">部门：</label>
									<p class="value" id="cont_department"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">&nbsp;I D：&nbsp;</label>
									<p class="value" id="cont_ID"></p>
								</div>
							</div>

							<div class="button">
								<a class="button_send" href="#" >同意</a><br>
								<a class="button_del" href="#">拒绝</a>
							</div>
						</div>
					</div><!-- end ngIf: currentContact -->
					<!-- ngIf: !currentContact -->
				</div>
			</div>


			<!--右侧显示个人详细信息-->
			<div class="main-right" style="display: none" id="right_myself">
				<div class="box_hd">
					<div class="title_wrap">
						<div class="title">个人信息设置</div>
					</div>
				</div>
				<div class="box_bd">
					<div class="">
						<div class="profile">
							<div class="my_avatar">
								<img class="my_img" alt="" id="my_photo" src="">
							</div>

							<div align="center">
								<button type="button" class="btn btn-default" id="change_my_icon_btn1"
										style="margin-top: 8px; width:135px;background-color: #eee;border-color: #eee;" value="更换头像">
							
								<form id="sendUserAvatar" method="POST" enctype="multipart/form-data" action="http://10.103.240.160:8080/modifyUserAvatar?uid=1">
							
								<!--<input onchange="selectImageAsHead(this);" type="file" name="file" id="change_my_icon_input1" class="webuploader-element-invisible"/>-->

								<input type="file" id="camera"  onchange="selectUserAvatar(this);" name="file">
								<!--<img src="../3.jpg" alt="" id="imgUrl">-->
								</form>
							</button>
							</div>

							<div class="my_userName">
								<h4 class="userName" id="my_nickName"></h4>
							</div>


							<div class="detail_my_info">
								<div class="meta_item">
									<label class="meta_item_label">&nbsp;I D：&nbsp;&nbsp;</label>
									<p class="value" id="myinfo_userID"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">名称：</label>
									<p class="value" id="myinfo_userName"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">昵称：</label>
									<p class="value">
										<input type="text" class="input_update_nickName" id="myinfo_nickName" value="">
									</p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">性别：</label>
									<p class="value">
										<label class="radio-inline">
											<input type="radio" name="sex" id="sex_male"
												   value="male" checked>男
										</label>
										<label class="radio-inline">
											<input type="radio" name="sex" id="sex_famale"
												   value="famale">女
										</label>
									</p>

								</div>
								<div class="meta_item">
									<label class="meta_item_label">部门：</label>
									<p class="value" id="myinfo_department"></p>
								</div>
								<div class="meta_item">
									<label class="meta_item_label">签名：</label>
									<p class="value">
										<input type="text" class="input_update" id="myinfo_msg" value="公无渡河，公竟渡河。" onclick="click_input()">
									</p>
								</div>
							</div>
							<div class="button">
								<a class="button_saveUpdate" id="saveUpdate_btn" href="#">保存修改</a>
							</div>
						</div>
					</div><!-- end ngIf: currentContact -->
					<!-- ngIf: !currentContact -->
				</div>
			</div>
		</div>
	</div>

	<!--模态框-->
	<!-- 添加好友 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		 style="margin-top: 100px">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel" align="center">添加好友</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-lg-8" style="width: 100%">
							<div class="input-group input-group-lg">
								<input id='newFriendName' type="text" class="form-control" placeholder="Search for..." size="500">
							</div><!-- /input-group -->
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_result">搜索</button> -->
					<button type="button" class="btn btn-primary" onclick="onSearchUser()">搜索</button>
				</div>
			</div>
		</div>
	</div>

	<!--新朋友搜索结果悬浮框-->
	<div class="modal fade" id="myModal_result" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		 style="margin-top: 100px">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
					<button type="button" class="close" onclick='onCloseAddFriendResult()' aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel_result" align="center">搜索结果</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-lg-8" style="width: 100%">
							<div id='addFriendN' class="panel panel-default elehide">
								<div class="panel-heading">
									<h3 class="panel-title">搜索结果</h3>
								</div>
								<!--未搜索到结果-->
								<div class="panel-body">
									未搜索到任何结果
								</div>
							</div>

							<div id='addFriendP' class="panel panel-default elehide">
								<!--搜索到好友-->
								<div class="panel-body">
									<div class="chooser pre-scrollable" style="border-bottom-color: white">
										<div class="contact_item">
											<div class="avatar">
												<img src="images/4.jpg" class="img">
											</div>
											<div class="info" style="float:left;">
												<h3 class="nickname" style="margin:15px">
													<span class="nickname_text">张三</span>
												</h3>
											</div>
											<div class="addUserBtn">
												<button type="button" class="btn btn-primary" style="float: right">添加</button>
											</div>
										</div>
									
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 发起聊天 -->
	<div class="modal fade" id="myModal_chat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>				
					<h4 class="modal-title" id="myModalLabel_chat" align="center">发起聊天</h4>
				</div>
				<div class="modal-body">
					<!-- <div class="start_chat_hd"> -->
					<div>
						<ul class="nav_tabs">
							<li role="presentation" id="change_select_people" class="nav_tab selected"
								onclick='change_select("change_select_people" ,"change_select_groups","people_div","group_div")'>
								选择联系人
							</li>
							<li role="presentation" id="change_select_groups" class="nav_tab"
								onclick='change_select("change_select_groups","change_select_people","group_div","people_div")'>
								选择群聊
							</li>
						</ul>
					</div>
					<!--发起聊天好友部分   -->
					<div style="display: block" id="people_div">
						<div>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control" placeholder="Search for..." size="500">
							</div><!-- /input-group -->
						</div>
						<div class="chooser" style="margin-top: 0px">
							<div class="start_chat_bd pre-scrollable contacts" style="position: relative;">
								<div class="contacts" style="height: 370px; margin-right: 0px; margin-bottom: 0px;">
									<div class="choose_all_List">


									</div> 
								</div>
							</div>
						</div>
						<!--
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary" onclick="onGenChat()">发起聊天</button>
						</div>
						-->
					</div>

					<!--发起聊天群组部分   -->
					<div style="display: none" id="group_div">
						<div class="chooser" style="margin-top: 0px">
							<div class="start_chat_bd pre-scrollable contacts" style="position: relative;">
								<div class="contacts" style="height: 370px; margin-right: 0px; margin-bottom: 0px;">
									<div class="choose_all_List">
<!-- 										<div style="height: 0px"></div>

										<div class="group_item" tabindex='1'>
											<div class="avatar">
												<img class="img" alt="" src="./images/1.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">web组</h4>
											</div>
										</div>

										<div class="group_item" tabindex='1'>
											<div class="avatar">
												<img class="img" alt="" src="./images/2.jpg">
											</div>
											<div class="info">
												<h4 class="nickname">iOS组</h4>
											</div>
										</div> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="onGenChat()">发起聊天</button>
				</div>
			</div>
		</div>
	</div>

	<!--邀请入群-->
	<div class="modal fade" role="dialog" id="chooseMember">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" align="center">选择联系人</h4>
				</div>
				<div class="modal-body">
					<div>
						<div>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control" placeholder="Search for..." size="500">
							</div><!-- /input-group -->
						</div>
						<div class="memberChooser pre-scrollable chooser">
							<div class="choose_all_List">


							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="onInviteMember()">邀请</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 初始化，从服务器获取初始化信息 -->
	<script src="js/init.js"></script>
	
	<!--自定义逻辑js-->
	<script src="js/index.js"></script>
<!-- 	<script type="text/javascript">
	$(function () {
           $("#btn_uploadimg").click(function () {
               var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
               if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                   alert("请选择图片");
                   return;
               }
               var formFile = new FormData();
               formFile.append("action", "UploadVMKImagePath");  
               formFile.append("file", fileObj); //加入文件对象
 
               //第一种  XMLHttpRequest 对象
               //var xhr = new XMLHttpRequest();
               //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
               //xhr.onload = function () {
               //    alert("上传完成!");
               //};
               //xhr.send(formFile);
 
               //第二种 ajax 提交
 				console.log("ajax")
               var data = {"file":fileObj,"from":3,"to":5,"time":2017};
               $.ajax({
                   url: "http://10.103.240.160:8080/sendPicToOne",
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   success: function (result) {
                       alert("上传完成!");
                   },
               })
           })
       })
</script> -->
	<script type="text/javascript">
		$("#senfPic").attr("target","rfFrame");
		$("#sendUserAvatar").attr("target","rfFrame");
	</script>
	<script type='text/javascript'>
		console.log("websocket")
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
           /* websocket = new WebSocket("ws://localhost:8080/websocket/"+userId);
			websocket = new WebSocket("ws://10.103.240.160:8080/websocket/"+userId);*/
             //websocket = new WebSocket("ws://10.210.70.115:80/websocket/"+userId);
            websocket = new WebSocket("ws://10.103.240.160:8080/websocket/"+userId);
        }
        else {
            alert('当前浏览器 Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            //setMessageInnerHTML("WebSocket连接发生错误");
            online=0;
			console.log("WebSocket连接发生错误")
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
        	online=1;
            console.log("WebSocket连接成功")
            //send()
           // setMessageInnerHTML("WebSocket连接成功");
        };

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var something = JSON.parse(event.data);
            console.log("接收消息为"+something);
            departMessage(something)
            //send()
            //setMessageInnerHTML(event.data);
			//alert(something.message);

            //messageAddLeft(something.from, something.message, "txt");
        };

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("WebSocket连接关闭");
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        };

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
           // document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }
/*页面关闭事件*/
window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = '确定离开此页吗？本页不需要刷新或后退';
    (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
    if(event.clientX<=0 && event.clientY<0) {
    	closeWebSocket();
		console.log("关闭");
	}
	else{
		console.log("取消")
	}
    return confirmationMessage;                                // Gecko and WebKit
});
        //发送消息
        function send() {
            var message = "你好"//$("#inputArea").val();
            var msg=JSON.stringify({
                "from": 3,
                "to": 5,
                "message": message
            });
            console.log(websocket.send(msg));
        }
        //消息类型区分
        function departMessage(content) {
        	switch (content.type) {
          		case "msg":
          			var uid = 'u' + content.from;
          			var chat = {"user":uid,"message":content.message,"type":"txt"}
          			chat_history[uid].push(chat)
          			var thisObj = 'u' + $("#title_name").data("id")
          			if (uid === thisObj) {
          				messageAddLeft(content.from, content.message, "txt");
          			}
          			break;
          		case "groupMsg":
          		    var gid = 'g' + content.gid;
          			var chat = {"user":gid,"message":content,"type":"txt"}
          			chat_history[gid].push(chat)
          			var thisObj = 'g' + $("#title_name").data("id")
          			if (gid === thisObj) {
						groupMessageAddLeft(content.from, content, "txt");	
          			}
          			break;
          		case "msg_pic":
          		    var uid = 'u' + content.from;
          			var chat = {"user":uid,"message":content.content,"type":"pic"}
          			chat_history[uid].push(chat)
          			var thisObj = 'u' + $("#title_name").data("id")
          			if (uid === thisObj) {
          				messageAddLeft(content.from, content.content, "pic");
          			}
          			//messageAddLeft(content.from, content.content, "pic");
          			break;
          		case "groupMsg_pic":
          			var gid = 'g' + content.gid;
          			var chat = {"user":gid,"message":content,"type":"pic"}
          			chat_history[gid].push(chat)
          			var thisObj = 'g' + $("#title_name").data("id")
          			if (gid === thisObj) {
						groupMessageAddLeft(content.from, content, "pic");	
          			}
          			//groupMessageAddLeft(content.from, content, "pic");
          			break;
          		case "msg_file":
          		    var uid = 'u' + content.from;
          			var chat = {"user":uid,"message":content,"type":"file"}
          			chat_history[uid].push(chat)
          			var thisObj = 'u' + $("#title_name").data("id")
          			if (uid === thisObj) {
          				messageAddLeft(content.from, content, "file");
          			}
          			//messageAddLeft(content.from, content, "file");
          			break;
          		case "groupMsg_file":
          		    var gid = 'g' + content.gid;
          			var chat = {"user":gid,"message":content,"type":"file"}
          			chat_history[gid].push(chat)
          			var thisObj = 'g' + $("#title_name").data("id")
          			if (gid === thisObj) {
						groupMessageAddLeft(content.from, content, "file");	
          			}
          			//groupMessageAddLeft(content.from, content, "file");
          			break;
				case "createGroupRes":
                // {"groupavatar":"NO_AVATAR","groupid":"64","groupname":"5-group","manager":"5","type":"createGroupRes"}
					var gid = 'g' + content.groupid;
					var gname = content.groupname;
					alert("成功加入群聊"+gname);
					console.log("创建群组信息")
					console.log(content)
					contacts[gid] = {
                        "nickname": content['groupname'],
                        "username": content['groupname'], 
                        "department": "暂无", 
                        "photo": content['groupavatar'],
                        "manager": content['manager'],
                        "ID": content['groupid'],
                        "dialogType": "multi"
					};
					console.log(contacts[gid])
					chats[gid] = {
                        "nickname": content['groupname'],
                        "username": content['groupname'],
                        "department": "暂无",
                        "photo": content['groupavatar'],
                        "manager": content['manager'],
                        "ID": content['groupid'],
                        "dialogType": "multi"
					};
                    ordered_chats[ordered_chats.length] = gid;
					getContacts();
					getChats();
                    $("#right_contacts").attr("style","display: none");
                    $("#right_myself").attr("style","display: none");
                    $("#right_default").show();
					channel(gid);
					chat_history[gid]=new Array();
                    clickChats();
				    break;

				case "modifyGroupNameRes":
                	// {"gid":"61","gname":"5-group-1","modifyerName":"zhangjie","type":"modifyGroupNameRes"}
					var gid = 'g' + content.gid;
					contacts[gid].nickname = content['gname'];
					getContacts();
					getChats();
				    break;

				case "addFri": //自动同意好友申请
                // {'fname1':'xxx', 'fid1':'xxx', 'avatar':'xxxx', 'message':'xxxxx'}
					var fid = content.fid1;

					$.ajax({
						url: ip + "addFriRes",
						type: 'get',
						dataType: 'json',
						contentType: "application/json; charset=utf-8",
						data: {
						    "fid1": fid,
							"fid2": userId,
							message: "yes"
						},

						success: function(data) {
							console.log(data)
						},

						error: function() {

						}
					});

				    break;

				case "addFriRes":
                // {'userID':'11','userName':'建设银行','avatar':'null','department':'安卓开发工程师:建设银行','phone':'111111','email':'11@11.com'}
					var uid = 'u' + content.userID;
					contacts[uid] = {
                        "nickname": content.userName,
                        "username": content.userName, 
                        "photo": content['avatar'],
                        "department": content['department'],
                        "phone": content['phone'],
                        "email": content['email'],
                        "ID": content.userID,
                        "dialogType": "single"
					};
					console.log("成功添加好友")
					console.log(content)
          			chat_history[uid] = new Array()
					alert("成功添加好友" + content.userName);

					//var contacts = {};
					//getContactsData();
					getContacts();
                    clickContacts();
					break;

				case "delFriRes":
				    var fid = 'u' + content.fid;
				    var uname = contacts[fid].username;
				    alert("已删除好友"+uname);
				    console.log(chats)
				    delete contacts[fid];
				    delete chats[fid];
				    console.log(chats);
                    ordered_chats.splice(ordered_chats.indexOf(fid), 1);
                    getChats();
				    getContacts();
				    hideAllRightPanel();
                    clickContacts();
				    break;

				case "pullMemberRes":
				    var uname = content.uname;
				    var mname = content.mname;
				    var myname = contacts['u'+userId].username;
				    var gname = contacts['g'+content.gid].username;
				    if(mname != myname) {
                        if (myname != uname) {
                            alert(uname + "邀请" + mname + "加入群聊" + gname);
                        } else {
                            clickBtnShowMember();
                            alert("成功邀请" + mname + "加入群聊" + gname);
                        }
                    }

				    console.log("有新成员入群");
				    break;

				case "delMemberRes":
				    var gid = content.gid;
				    var mname = content.mname;
				    var gname = contacts['g'+gid].username;
				    alert(mname+"已离开群聊"+gname);

				    console.log("有人被T");
				    break;

				case "beDelMemberRes":
				    var gid = content.gid;
				    var gname = contacts['g'+gid].username;
				    alert("您已退出群聊"+gname);
                    delete contacts['g'+gid];
                    delete chats['g'+gid];
                    console.log(chats);
                    getContacts();
                    hideAllRightPanel();
                    ordered_chats.splice(ordered_chats.indexOf('g'+gid), 1);
                    getChats();
				    console.log("我被T");
                    clickChats();
				    break;
        	}
        }
	</script>
</body>
</html>